<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>新建分组</title>
    <link type="text/css" rel="stylesheet" href="css/style.css">
    <link type="text/css" rel="stylesheet" href="css/frame.css">
</head>
<body class="ub ub-ver">
<div id="frameContent" class="ub-f conScrollY">
    <div style="padding: .2rem 0 .5rem 0;">请选择（以下是未分组联系人）：</div>
    <div>
        <div class="member">张三</div>
        <div class="member">李四</div>
        <div class="member">王锤</div>
        <div class="member">王翠</div>
        <div class="member">李毛</div>
        <div class="member">赵六</div>
        <div class="member">张三</div>
        <div class="member">张三</div>
        <div class="member">张三</div>
        <div class="member">张三</div>
        <div class="member">张三</div>
        <div class="member">张三</div>
        <div class="member">张三</div>
        <div class="member">张三</div>
        <div class="member">张三</div>
        <div class="member">张三</div>
        <div class="member">张三</div>
        <div class="member">张三</div>
        <div class="member">张三</div>
        <div class="member">张三</div>
        <div class="member">张三</div>
        <div class="member">张三</div>
        <div class="member">张三</div>
        <div class="member">张三</div>
        <div class="member">张三</div>
        <div class="member">张三</div>
        <div class="member">张三</div>
        <div class="member">张三</div>
        <div class="member">张三</div>
        <div class="member">张三</div>
        <div class="member">张三</div>
        <div class="member">张三</div>
        <div class="member">张三</div>
        <div class="member">张三</div>
        <div class="member">张三</div>
        <div class="member">张三</div>
        <div class="member">张三</div>
        <div class="member">张三</div>
    </div>
</div>
<div id="btnFoot" class="ub ub-ac ub-pe">
    <div class="btn cancel">取消</div>
    <div class="btn ok">确定</div>
</div>

<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/layer/layer.js"></script>
<script>
    var layerIndex = parent.layer.getFrameIndex(window.name);

    $(document).on('click', '.member', function (e) {
        var $e = $(this);
        $e.toggleClass('selected');
    });

    $('.btn').on('click', function (e) {
        var $e = $(this);
        if ($e.hasClass('cancel')) {
            parent.layer.close(layerIndex);
        }

        if ($e.hasClass('ok')) {
            var members = [];
            $('.member.selected').each(function (index, item) {
                var memberName = $.trim($(item).html());
                members.push(memberName);
            });
            if (!members.length) {
                layer.msg('您还没有选择要添加的成员');
                return;
            }
            parent.addMembers(members, true);
            parent.layer.close(layerIndex);
        }
    });

</script>
</body>
</html>